<template>
  <div class="business_record">
    <RouteTitle />
    <a-row
      :wrap="false"
      :gutter="[16, 16]"
      style="margin: 20px 0; transform: translateX(-10px)"
    >
      <a-col :span="16">
        <a-row class="row-bg" :wrap="false">
          <a-col :span="spanNum" v-for="(item, index) in topList" :key="index">
            <a-row :wrap="false">
              <a-col
                class="image-icon"
                :class="index != 0 ? 'border-left' : ''"
              >
                <cu-icon
                  :style="{ color: item.color }"
                  :type="item.icon"
                  class="image"
                />
              </a-col>
              <a-col>
                <div class="title">{{ item.title }}</div>
                <div class="num">{{ item.num }}</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8">
        <div class="flex align-center row-bg-right">
          <a-row justify="space-between" class="flex-1" align="middle" @click="goInvite" style="padding: 0px 10px;">
            <a-col class="text">
              <a-space>
                <gift-outlined style="font-size: 35px;color: var(--ss-primary-color);"/>
                <span>邀请新用户</span>
              </a-space>
            </a-col>
            <a-col class="right-icon">
              <right-outlined />
            </a-col>
          </a-row>
          <a-divider type="vertical" style="height: 60px;"></a-divider>
          <a-row justify="space-between" class="flex-1" align="middle" @click="bVisible = true" style="padding: 0px 10px;">
            <a-col class="text">
              <a-space>
                <img :src="chargeIcon" />
                <span>余额充值</span>
              </a-space>
            </a-col>
            <a-col class="right-icon">
              <right-outlined />
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane
        v-for="(item, index) in tabList"
        :key="item.tab_id"
        :tab="item.tab_name"
      >
        <component :is="item.component" ref="componentRef" />
      </a-tab-pane>
    </a-tabs>
    <!-- 导出弹框 -->
    <!-- <ExportMdal :visible="visibleExport" @cacel="visibleExport = false" /> -->

    <rechargeModal :visible="bVisible" @close="bVisible = false" @success="successVisible"></rechargeModal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, ref } from "vue";
import { RightOutlined, GiftOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import ExportMdal from "../../shotstack/components/ExportMdal/index.vue";
import rechargeRecords from "./modules/rechargeRecords.vue";
import transactionFlow from "./modules/transactionFlow.vue";
import request from "../../../common/utils/request";
import rechargeModal from "@/views/socialMedia/AccountCenter/modules/rechargeModal.vue";
export default defineComponent({
  name: "MediaBusinessRecord",
  components: {
    RightOutlined,
    ExportMdal,
    rechargeRecords,
    transactionFlow,
    GiftOutlined,
    rechargeModal,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      activeKey: 1,
      visibleExport: false,
      chargeIcon:
        "",
      topList: [],
      tabList: [
        {
          tab_id: 1,
          component: "transactionFlow",
          tab_name: "交易流水",
          key:'flow',
        },
        {
          tab_id: 2,
          component: "rechargeRecords",
          tab_name: "充值记录",
          key:'recharge',
        },
      ],
      bVisible: false,
    });
    let componentRef = ref();
    const goVoucher = () => {
      router.push({
          name: "VoucherCenter",
        });
    };

    const goInvite = () => {
      router.push({
          name: "MediaInviteUser",
        });
    };
    const successVisible = () => {
      state.bVisible = false;
      if(state.activeKey==1){
        componentRef.value?.[0]?.getTableList()
      }else{
        componentRef.value?.[1]?.getTableList()
      }
    }
    const getUserBalance = () => {
      request.get("/work_ai", "/user/shotstack/user/statistic").then((res) => {
        state.topList = res?.result;  
        if(route.path.includes('socialMedia')){
          let index = state.topList.findIndex(item => item.title === '剪辑余额（条）')
          index!=-1&&state.topList.splice(index, 1)
        }
      });
    };

    getUserBalance();
    const spanNum = computed(() => {
      return state.topList.length?(24 / state.topList.length):18;
    })
    return {
      ...toRefs(state),
      goVoucher,
      goInvite,
      spanNum,
      successVisible,
      componentRef,
    };
  },
});
</script>

<style lang="less" scoped>
.business_record {
  .row-bg {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 26px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #555;
    }
    .num {
      font-size: 40px;
      font-weight: 700;
      color: #202020;
    }
  }
  .image-icon {
    width: 36px;
    height: 36px;
    margin-right: 20px;
    .image {
      font-size: 36px;
    }
  }
  .border-left {
    position: relative;

    &::after {
      position: absolute;
      left: -30px;
      top: 10px;
      width: 1px;
      height: 50px;
      background: #e8e8e8;
      content: "";
    }
  }
  .row-bg-right {
    height: 140px;
    border-radius: 10px;
    background: linear-gradient(46deg, #fffcf5 0%, #fff5e2 52%, #fffcf5 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    .text {
      font-size: 22px;
    }
    .right-icon {
      width: 23px;
      height: 23px;
      cursor: pointer;
      line-height: 23px;
      text-align: center;
      border-radius: 23px;
      font-size: 12px;
      color: #fff;
      background: linear-gradient(58deg, #ffa71f 0%, #ffd723 100%);
    }
  }
  :deep(.ant-tabs-top > .ant-tabs-nav) {
    margin-bottom: 0;
  }
}
</style>
